import React, { Component } from "react";

/* 1. 引入重定向组件 Redirect */
import { HashRouter as Router, Route, Redirect,Link} from "react-router-dom";

/* 2. 新建一个登录界面的组件 */
function Login(props) {
  console.log(props);
  return (
    <div>
      {/* 5. 添加路由的跳转事件 */}
      <button
        onClick={() => {
          props.history.push("/home");
        }}
      >
        登录
      </button>
    </div>
  );
}
/* 7. 接收 路由的参数 */
function Home(props){
  console.log(props);
  return <h1>
    home 页面 {props.match.params.id}
  </h1>
}
export default class App extends Component {
  render() {
    /* 3. 将Router 作为根节点 */
    return (
      <Router>
        {/* 6. 设置一个 Link 组件 */}
        <Link to="/home/666">主页（带参数）</Link>
        {/* 4. 配置根默认的路由规则 / => Login */}
        <Route path="/" render={(props)=><Redirect to="/home"></Redirect>}></Route>
        {/* 5. 添加 /home 路径对应规则 */}
        <Route path="/home/:id" component={Home}></Route>
      </Router>
    );
  }
}
